<h1>资源列表</h1>
<a href="/admin/accesses/create" class="btn btn-success mb3">添加用户</a>
<form method="get" action="/admin/accesses" class="mb-3 mt-3">
    <div class="input-group">
        <input type="text" name="keyword" class="form-control" placeholder="请输入搜索关键字" value="{{keyword}}">
        <button class="btn btn-outline-secondary">搜索</button>
    </div>
</form>
<table class="table">
    <thead>
        <tr>
            <td>名称</td>
            <td>类型</td>
            <td>url</td>
            <td>排序</td>
            <td>状态</td>
            <td>操作</td>
        </tr>
    </thead>
    <tbody id="accessTreeTable">
       {{#each accessTree}}
        {{> access-node this depth=0}}
       {{/each}}
    </tbody>
</table>

<script>
    function deleteAccess(id){
        if (confirm('确定要删除吗')) {
            $.ajax({
                url: `/admin/accesses/${id}`,
                type: 'delete',
                success: (data) => {
                    if (data.success) {
                        const params = new URLSearchParams(window.location.search)
                        params.delete('page')
                        params.append('page', 1)
                        const query = params.toString()
                        window.location = window.location.pathname + '?' + query
                    }
                }
            })
        }
    }

    $(() => {
        function hideChildren($tr, id){
            const $children = $tr.nextAll(`tr[data-parent="${id}"]`)
            $children.each(function(){
                const childId = $(this).data('id')
                hideChildren($(this), childId)
            })
            $children.hide()
        }
        $('#accessTreeTable').on('click', '.toggle', function () {
            const $togger = $(this)
            const id = $togger.data('id')
            const $tr = $togger.closest('tr') // 找到父最近的tr
            if ($tr.nextAll(`tr[data-parent="${id}"]`).is(':visible')) {
                hideChildren($tr,id)
                $togger.html(`<i class="bi bi-folder-plus"></i>`)
            } else {
                $tr.nextAll(`tr[data-parent="${id}"]`).show()
                $togger.html(`<i class="bi bi-folder-minus"></i>`)
            }
        })
        $('.sort-text').on('dblclick', function () {
            const $this = $(this)
            const id =$this.data('id')
            $this.addClass('d-none')
            $(`.sort-input[data-id="${id}"]`).removeClass('d-none').focus()
        })
        $('.sort-input').on('blur', function () {
            const $this =$(this)
            const id = $this.data('id')
            const newSort = $this.val()
            $this.addClass('d-none')
            $(`.sort-input[data-id="${id}"]`).removeClass('d-none').text(newSort)

            $.ajax({
                url: `/admin/accesses/${id}`,
                headers: {
                    'accept': 'application/json'
                },
                contentType: 'application/json',
                type: 'put',
                data: JSON.stringify({sort: +newSort}),
                success: (data) => {
                    if (data.success) {
                        location.reload()
                    }
                }
            })
        })
        $('.status-toggle').on('click',function(){
            const $this =$(this)
            const id = $this.data('id')
            const currentStatus = $this.data('status')
            const newStatus = currentStatus==1?0:1
            $.ajax({
                url: `/admin/accesses/${id}`,
                headers: {
                    'accept': 'application/json'
                },
                contentType: 'application/json',
                type: 'put',
                data: JSON.stringify({status: newStatus}),
                success: (data) => {
                    if (data.success) {
                        location.reload()
                    }
                }
            })
        })
    })
</script>